html{background-color: rgb(27, 29, 28);}
*{color:white;}
body{ margin: 0px 0px 0px 1.5px;}

.time-now, .date-now {
  font-size: 0.88rem; 
  color: white;
}

.top-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 2rem;
    background-color: rgba(107, 107, 90, 0.83);
  }
  
.topmost{
    width:100%; height:auto;
    animation: topmostAnim 10s infinite;
    background: linear-gradient(225deg, rgba(90, 88, 236, 0.76),  rgba(7, 4, 185, 0.749))
}
div.wrap-topmost{
    background-image: url("../movies explantion/Movie site ext refs/LMjsCode.png");
    background-size: contain;
}
@keyframes topmostnim {
    0%{ background: linear-gradient(0deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    5%{ background: linear-gradient(30deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    10%{ background: linear-gradient(45deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    15%{ background: linear-gradient(60deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    20%{ background: linear-gradient(90deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    25%{ background: linear-gradient(120deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    30%{ background: linear-gradient(135deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    35%{ background: linear-gradient(150deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    40%{ background: linear-gradient(180eg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    50%{ background: linear-gradient(225deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    55%{ background: linear-gradient(240deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    60%{ background: linear-gradient(270deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    65%{ background: linear-gradient(285deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    70%{ background: linear-gradient(315deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    75%{ background: linear-gradient(330deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    80%{ background: linear-gradient(349deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    90%{ background: linear-gradient(358deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
    100%{ background: linear-gradient(0deg, rgb(90, 88, 236),  rgb(7, 4, 185), rgb(201, 42, 65)); }
}
#demo1{
    font-family: 'Courier New', Courier, monospace;
    font-size: 20pt;
    color: goldenrod;
    text-shadow: 2.2px 2px rgb(95, 94, 94);
}
.demo1Animate{
    animation-name: anim1;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    display: inline-block;
    border-radius: 5%;
    margin: 30px;
}
@keyframes anim1{
    25%{
        background: linear-gradient( 270deg, rgba(181, 168, 24, 0.75), rgb(210, 186, 234)) ;
        font-weight: bolder;
        color: rgb(213, 185, 26);
    }
    50%{
        background: linear-gradient(90deg, rgb(9,9,9), rgba(205, 192, 51, 0.75));
        color: rgb(218, 189, 24);
    }
    62%{
        font-weight: lighter;
        color: rgb(229, 197, 18);
    }
    75%{
        background: linear-gradient(180deg, rgb(124, 104, 144), rgb(167, 181, 78));
        font-weight: bolder;
        color: yellow;
    }
    100%{
        color: yellow;
        background: linear-gradient(358deg, rgba(181, 168, 24, 0.75), rgb(210, 186, 234))
    }
}
div.topmost>img{
    float: right;
}
h1{margin-top:0px;
    font-size: 38pt;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgba(107, 107, 90, 0.83);
}
h1::first-letter{
    color:rgb(146, 17, 35);
    font-size:46pt;
}
span.nearH1{background-color: rgba(107, 107, 90, 0.83);
    color:rgb(255, 193, 7);
    text-align: center;
    font-size:10pt;
}
p.nearH1{
    font-size:10pt;
    font-family:cursive;
}
a:link, a:visited{
    text-decoration: none;
    font-style: italic;
    color:rgb(238, 238, 225)
}
form button a:link, form button a:visited, form button a:hover{
    font-size: 0.7rem; color:white;
    background-color: rgb(28, 8, 119);
    text-decoration: none;
}
a:hover{
    background-color: rgb(0, 157, 255);
    text-decoration: underline solid rgb(210, 220, 114) 1px;
    color:  rgb(210, 220, 114);
    font-family: 'Courier New', Courier, monospace;
}
input{border-radius:10%;
    border:2px solid red;  
}
button{
    border-radius:10%; border: 4px outset rgb(29, 6, 66);
    background-color: rgb(28, 8, 119);
    padding:8px; margin-top: 4px;
    font-size: 8pt;
}
ul.episodes{
    list-style-type: none;
    text-decoration-style: none;
    text-decoration-color: rgb(18, 18, 18);
} 
ul.episodes a{
    text-decoration-style: none;
    text-decoration-color: rgb(18, 18, 18);
}
ul.episodes a:hover{
    background-color: rgb(255, 255, 255);
    color:rgb(55, 55, 236)
}
ul.episodes>li{
    margin: 5px;
}   
ul.none{ 
    list-style-type: none;
    display:flex; gap: 12px;  
    justify-content:center;
    font-size:small; font-family: 'Courier New', Courier, monospace;
}
img{
    width:250px; height:250px;
}
p.nearForm{
    font-size:x-small;
}
label{
    font-size:10pt;
}
.ToTop{
    width: 30px; height:30px;
    position: fixed;
    bottom:2px; right:8px;
    border-radius:50%;
    background-color: rgb(65, 39, 6);
    color:rgb(6,6,6);
    text-align: center;
    font-size:18pt;
    font-family: monospace;
}
.ToTop a:link, .ToTop a:visited, .ToTop a:hover, .ToTop a:active{
    background-color: rgb(65, 39, 6);
    font-size:18pt;  font-family: monospace;
    text-decoration: none;
}
.boldlist li footer{
    margin-bottom: 25px;
    font-size:9pt; font-weight:lighter;
}
footer.mainF{ border-radius:2%;
    background-color: rgb(6, 6, 129) ;
    width:100%; height:auto;
    font-family:monospace;
}
footer.mainF h3{font-weight:bolder;
    text-align:center;
    margin-bottom: 5px;
}
footer.mainF ul.nearFooter{
    margin-bottom:5px;
    margin-left:20%; margin-right:20%; padding: 3px 0px 23px 0px;
    font-size: 10pt;
    display: flex; gap:20px;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border-bottom: 1px solid white;
}
footer.mainF ul.nearFooter>li{ width: 10rem;   height: auto;}

p.nearFooter{
    font-weight: lighter; font-size:10pt;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
footer a:link, footer a:visited{
    font-family: monospace;   font-size: 1rem;
    text-decoration: none;
}
footer a:hover{
    font-family: monospace; color: red;
}
footer p.contact{
    display: flex;   gap: 10px; 
    flex-flow: row wrap;   justify-content: center;
}
@media (min-width:850px){
    ul.boldlist{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 5px;
    }
    ul.boldlist li{
        width: 31%;
    }
}


@media screen  and (max-width:650px){
    body{margin-left: 1%;  margin-right: 1%;}
    div.topmost h1{font-size:  1.3rem;}
    h1::first-letter{ font-size:1.8rem;
    }
    span.nearH1{
        font-size: 0.64rem;;
    }
    div.topmost>img {
        display: none;
    }
    p.nearH1{ font-size: 0.35rem ;}
    footer.mainF, div.wrap-topmost{width: 100vw; 
        margin-left: 0%;    margin-right: 0%;   margin-bottom: 0%;
    }
}
@media screen and (max-width:420px){
    div.topmost h1{font-size:  1.3em;}
    h1::first-letter{ font-size:1.6rem;}
    span.nearH1{
        font-size: 0.38rem;
    }
    p.nearH1{ font-size: 0.1rem ;}
    p.nearFooter{font-size: 0.65rem;}
    .boldlist li footer{font-size: 0.4rem}
}